<template>
  <div>
    <span v-show="show" :class="tagClass" :style="newStyle">
      <span>{{ $attrs.value }}</span>
      <van-icon
        v-if="$attrs.closable"
        name="cross"
        style="margin-left:5px;cursor: pointer;"
        @click="show=!show"
      />
    </span>
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-tag",
  data() {
    return {
      show: true,
    };
  },
  computed: {
    plain() {
      return this.$attrs.effect.plain;
    },
    tagClass() {
      const className = "Fg-pho-tag--";
      const type = className + this.$attrs.type;
      const size = className + this.$attrs.size;
      const round = this.$attrs.round ? className + "round" : "";
      const hit = this.$attrs.hit ? "is-hit" : "";
      const effect = className + this.$attrs.effect;
      return `Fg-pho-tag ${size} ${type} ${round} ${hit} ${effect}`;
    },
  },
};
</script>

<style lang="scss" scoped>
$primary: #409eff;
$success: #67c23a;
$danger: #f56c6c;
$info: #909399;
$warning: #e6a23c;

.Fg-pho-tag {
  background-color: #ecf5ff;
  display: inline-block;
  padding: 2px 6px;
  line-height: 16px;
  font-size: 12px;
  color: $primary;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;

  &.Fg-pho-tag--primary {
    border-color: #d9ecff;
    color: $primary;
    &.is-hit {
      border-color: $primary;
    }
    &.Fg-pho-tag--dark {
      background-color: $primary;
    }
  }
  &.Fg-pho-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: $success;
    &.is-hit {
      border-color: $success;
    }
    &.Fg-pho-tag--dark {
      background-color: $success;
    }
  }
  &.Fg-pho-tag--info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: $info;
    &.is-hit {
      border-color: $info;
    }
    &.Fg-pho-tag--dark {
      background-color: $info;
    }
  }
  &.Fg-pho-tag--danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: $danger;
    &.is-hit {
      border-color: $danger;
    }
    &.Fg-pho-tag--dark {
      background-color: $danger;
    }
  }
  &.Fg-pho-tag--warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: $warning;
    &.is-hit {
      border-color: $warning;
    }
    &.Fg-pho-tag--dark {
      background-color: $warning;
    }
  }
  &.Fg-pho-tag--plain {
    background-color: #fff;
  }
  &.Fg-pho-tag--dark {
    color: #fff;
  }
}

.Fg-pho-tag--dark {
  background-color: $primary;
  border-color: $primary;
}
.Fg-pho-tag--round {
  border-radius: 999px;
}

.Fg-pho-tag--mini {
  height: 20px;
  padding: 0 5px;
  line-height: 19px;
}
.Fg-pho-tag--small {
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
}

.Fg-pho-tag--medium {
  height: 28px;
  line-height: 24px;
}
</style>